<template>
  <view style="overflow-x: hidden; font-size: 0">
    <img
      v-if="isInPptr"
      src="/static/header.png"
      style="width: 100%; display: block; margin-bottom: -600rpx"
    />

    <view id="headerBox">
      <!-- <Header v-if="!!userFaceInfo" :userFaceInfo="userFaceInfo" /> -->
      <Header v-if="collect" :userFaceInfo="collect" />

      <view class="download" @click="openEmailDialog" v-if="!isInPptr">
        <view class="download-left">
          <img src="/static/pdf-icon.png" class="pdf-icon" />
        </view>
        <view class="download-center">输入邮件地址获取PDF报告</view>

        <view class="download-right">确定</view>
      </view>

      <!-- <view class="report">
        <view class="report-title"> 美学诊断报告 </view>
        <view class="report-title-en"> FD Aesthetic Diagnosis Report </view>
      </view> -->
    </view>

    <view
      style="display: block; background-color: white; position: relative; z-index: 2"
      v-if="isInPptr"
    >
      <img src="/static/nav-1.png" style="width: 100%; display: block" />
      <img src="/static/nav-2.png" style="width: 100%; display: block" />
    </view>

    <view :class="classFixed" style="width: 100%" v-if="!isInPptr">
      <Tabs :tabs="tabsList" :activeTab="activeTab" @update:activeTab="onTabChange"> </Tabs>
    </view>

    <view
      class="content"
      :style="{
        paddingTop: (classFixed === '' ? 0 : 60) + 'px',
        overflowY: 'hidden',
      }"
      v-if="collect"
    >
      <view v-if="isInPptr ? true : activeTab === 0">
        <view class="style-type">
          <!--
          基因风格
          warning:
            1、三个图片还未给
            2、type字段还未给
          -->

          <!-- <genetic-style
            :gender="collect?.sex"
            :pic-list="[
              collect?.eye_img_url ?? '',
              collect?.triangular_area_img_url ?? '',
              collect?.full_face_img_url ?? '',
            ]"
            :styleType="collect?.type"
          /> -->
          <genetic-style
            :gender="collect?.sex"
            :pic-list="[
              collect?.firstImageUrl ?? '',
              collect?.secondImageUrl ?? '',
              collect?.thirdImageUrl ?? '',
            ]"
            :styleType="collect?.type"
          />

          <!--          肤色-->
          <!-- <SkinColor :skinColor="styleType?.complexion" /> -->
          <SkinColor :skinColor="collect?.complexion" />

          <FacialColorLatitude
            :hue="collect?.hue ?? 0"
            :chroma="collect?.chroma ?? 0"
            :luminance="collect?.luminance ?? 0"
          />

          <!--          轮廓类型-->
          <template v-if="customFigure">
            <SensoryTypes
              :type="collect.straight_total_score_t"
              :ai-desc="customFigure?.contour?.desc"
            />

            <!--          量感类型-->
            <TypeOfMass
              :type="collect.total_sense_of_quantity_t"
              :ai-desc="customFigure?.quantity?.desc"
            />
            <!-- <h1>动静类型</h1> -->
            <!--          动静类型-->
            <Movementtype
              :type="collect.dynamic_static_t"
              :ai-desc="customFigure?.movement?.desc"
            />
            <!--          体型-->
            <BodyType :body-type="collect?.somatotype" :gender="collect?.gender" />
          </template>

          <template v-if="true">
            <!-- 搭配趋势 -->
            <!-- <h1>搭配趋势</h1> -->
            <!-- <CustomSwiper :items="items" /> -->

            <!--          个人分格描述报告-->
            <StyleDiagnosticReport :html="customerStyle" />

            <!-- <BottomPic
              :style-type="collect?.type"
              :psychological-style="collect?.psychological_style"
              :gender="collect.sex"
            /> -->
          </template>
        </view>
      </view>

      <view v-if="isInPptr ? true : activeTab === 1">
        <view class="style-type">
          <view class="title">四季色彩定位</view>
          <view class="swiper-container">
            <view class="avatar-box">
              <view class="left-btn btn" @click="chageSwiperBtn(-1)">
                <img :src="pngImgUrl + 'leftRe.png'" alt="" srcset="" />
              </view>
              <view class="right-btn btn" @click="chageSwiperBtn(1)">
                <img :src="pngImgUrl + 'rightRe.png'" alt="" srcset="" />
              </view>
            </view>
            <swiper class="swiper" @change="chageSwiper" :current="current">
              <swiper-item v-for="(item, index) in newColorTypeList" :key="index">
                <view class="swiper-item">
                  <view class="img-box">
                    <view style="width: 235px; height: 235px; position: absolute; z-index: 99">
                      <img
                        style="width: 235px; height: 235px"
                        :src="item.avatarFrameImgUrl"
                        alt=""
                        srcset=""
                      />
                    </view>
                    <view class="avatar">
                      <img :src="collect?.avatar_img_url" alt="" srcset="" />
                    </view>
                  </view>
                </view>
              </swiper-item>
            </swiper>
          </view>
          <view class="swiper-instructions">
            <view class="swiper-type-name">{{ colorTypeInfo.typeName }}型</view>
            <view class="swiper-type-name-en">{{ colorTypeInfo.enName }}</view>
            <view class="swiper-type-text">
              {{ colorTypeInfo.typeName + '型' === collect.sj_color_type ? '最佳颜色' : '不匹配' }}
            </view>
          </view>
          <view class="content-box">
            <view class="padding-top20">
              <rich-text :nodes="colorTypeText.characteristic"></rich-text>
            </view>
            <view class="padding-top20">
              <img
                class="image"
                :src="colorTypeText.colourDiscImgUrl"
                alt=""
                srcset=""
                @click="previewImage(colorTypeText.colourDiscImgUrl)"
              />
            </view>
            <view class="padding-top20">
              <rich-text :nodes="colorTypeText.advise"></rich-text>
            </view>

            <view class="padding-top20">
              <img
                class="image"
                :src="colorTypeText.adviseImgUrl"
                alt=""
                srcset=""
                @click="previewImage(colorTypeText.adviseImgUrl)"
              />
            </view>
            <view class="padding-top20">
              <rich-text :nodes="fashionNeutrals"></rich-text>
            </view>
            <view class="padding-top20">
              <img
                class="image"
                :src="colorTypeText.fashionNeutralsImgUrl"
                alt=""
                srcset=""
                @click="previewImage(colorTypeText.fashionNeutralsImgUrl)"
              />
            </view>

            <!-- 搭配趋势 -->
            <!-- <CustomSwiper :items="items" /> -->
            <view class="padding-top20">{{ colorTypeInfo.typeName }}人穿衣搭配全方案</view>
            <view class="padding-top20">
              <rich-text :nodes="colorTypeText.scheme"></rich-text>
            </view>

            <view v-if="collect?.gender === '女'" style="padding: 0 20px">
              <view class="reference-img-box">
                <img class="reference-img1" :src="colorTypeInfo.useReferenceImgUrl" />
              </view>
            </view>
            <view style="padding-left: 20px"> 注：人工智能大模型在计算中可能存在0.5%的误差。 </view>
            <view class="reference-complate"> ------ 色彩类型报告完 ------ </view>
          </view>
        </view>
      </view>
      <!-- 依此类推 -->
      <view v-if="isInPptr ? true : activeTab === 2">
        <view class="style-type">
          <view class="avatar-warp">
            <view
              :class="index === 1 ? 'avatar-main' : 'avatar-side'"
              v-for="(item, index) in avatarList"
              :key="index"
            >
              <img :src="item.url" alt="" srcset="" @click="previewImage(item.url)" />
            </view>
          </view>
          <view class="rich-text-content">
            <rich-text :nodes="praiseTextList[0]"></rich-text>
            <!-- <view
              class="face-img-box"
              :style="{
                height: userFaceInfo?.gender === '男' ? '150px' : '328px',
              }"
            > -->
            <view
              class="face-img-box"
              :style="{
                height: collect?.gender === '男' ? '150px' : '328px',
              }"
            >
              <img style="object-fit: cover" :src="faceImgUrl" alt="" srcset="" />
            </view>
            <rich-text :nodes="praiseTextList[1]"></rich-text>
            <view class="more-hairstyle">
              <view class="" style="display: flex; justify-content: center; margin-bottom: 16px">
                <view>更多发型一键试戴</view>
              </view>
              <view class="scroll-box">
                <view
                  class=""
                  @click="toHairstyleRoom(item)"
                  v-for="(item, index) in hairStyleList"
                  :key="index"
                  style="height: 103px; margin-right: 8px"
                >
                  <img style="width: 76px; height: 100%" :src="item.fileUrl" alt="" srcset="" />
                </view>
              </view>
            </view>
            <rich-text :nodes="praiseTextList[2]"></rich-text>
            <view style="margin-top: 56px"> 注：人工智能大模型在计算中可能存在0.5%的误差。 </view>
            <view class="reference-complate" style="margin-bottom: 0; margin-top: 10px">
              ------ 发型报告完 ------
            </view>
          </view>
        </view>
      </view>
      <view v-if="isInPptr ? true : activeTab === 3">
        <view class="style-type" style="overflow-y: hidden">
          <view class="lucky-color-box" style="overflow-y: hidden">
            <view class="shengxiao">
              <img
                :src="
                  `https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/chineseZodiac/` +
                  shegnxiaoImgUrl
                "
                alt=""
                srcset=""
                @click="
                  previewImage(
                    `https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/chineseZodiac/` +
                      shegnxiaoImgUrl,
                  )
                "
              />
            </view>
            <rich-text :nodes="luckyTxtList[0]"></rich-text>
            <view class="five-attribute-box">
              <view
                class="numblock"
                style="background-color: rgba(193, 156, 45, 1); top: 286px; left: 40px"
                >{{ numToChinese(shengxiaoNumList[0]) }}</view
              >
              <view
                class="numblock"
                style="background-color: rgba(62, 166, 123, 1); top: 32px; left: 119px"
                >{{ numToChinese(shengxiaoNumList[1]) }}</view
              >
              <view class="numblock" style="background-color: rgba(61, 146, 168, 1); top: 136px">{{
                numToChinese(shengxiaoNumList[2])
              }}</view>
              <view
                class="numblock"
                style="background-color: rgba(195, 52, 55, 1); top: 150px; right: 10px"
                >{{ numToChinese(shengxiaoNumList[3]) }}</view
              >
              <view
                class="numblock"
                style="background-color: rgba(253, 231, 73, 1); top: 293px; right: 70px"
                >{{ numToChinese(shengxiaoNumList[4]) }}</view
              >
              <view class="five-attribute">
                <view class="avatorLogo">
                  <img :src="userFaceInfo?.avatar_img_url" alt="" srcset="" />
                </view>
                <view>
                  <img
                    src="https://llshop.zglvling.com/shop/img/png/h5/baseMap.png"
                    alt=""
                    srcset=""
                  />
                </view>
              </view>
            </view>

            <rich-text :nodes="luckyTxtList[1]"></rich-text>
            <view style="margin-top: 56px"> 注：人工智能大模型在计算中可能存在0.5%的误差。 </view>
            <view class="reference-complate" style="margin-bottom: 0">
              ------ 幸运色分析完 ------
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 图片预览遮罩层 -->
  <view v-if="showPreview" class="preview-mask" @click="closePreview">
    <view class="preview-container" @click.stop>
      <image
        :src="currentPreviewImage"
        class="preview-image"
        mode="widthFix"
        @click="closePreview"
      ></image>
    </view>
  </view>

  <!-- <view class="btn-bottom" v-if="collect">
    <button class="next-btn" @click="openEmailDialog">发送到邮件</button>
  </view> -->

  <!--
  <view class="m-dialog" v-if="dialog.visible">
    <div class="m-dialog-main">
      <div class="email">
        邮箱：<input
          v-model="email"
          focus
          placeholder="请输入您的邮箱"
          placeholder-class="placeholder"
        />
      </div>

      <button class="btn" @click="sendEmail">发送</button>
    </div>
  </view> -->
</template>

<script setup>
  import { ref, onMounted, onUnmounted, watchEffect } from 'vue';
  import Header from './component/Header/index.vue';
  import Tabs from './component/Tabs/index.vue';
  import { fashionNeutrals, colorTypeList, faceList, shengxiaoImgList } from './database';
  import {
    uploadFormData,
    downloadFile,
    numToChinese,
    getMaxElement,
    reorderByValue,
  } from '../../utils/index';
  import GeneticStyle from './component/FirstStyleType/geneticStyle.vue';
  import SkinColor from './component/FirstStyleType/SkinColor.vue';
  import BottomPic from './component/FirstStyleType/BottomPic.vue';
  import StyleDiagnosticReport from './component/FirstStyleType/StyleDiagnosticReport.vue';
  import BodyType from './component/FirstStyleType/BodyType.vue';
  import FacialColorLatitude from './component/FirstStyleType/FacialColorLatitude.vue';
  // import CustomSwiper from './component/CustomSwiper/CustomSwiper';
  import SensoryTypes from './component/FirstStyleType/SensoryTypes.vue';
  import TypeOfMass from './component/FirstStyleType/TypeOfMass.vue';
  import Movementtype from './component/FirstStyleType/Movementtype.vue';
  import ReportApi from '../../sheep/api/report';

  import * as abc from './api';
  console.log('exchangeHairHistoryByTaskId: xxxxxxxxxx', abc.exchangeHairHistoryByTaskId);

  import { onLoad } from '@dcloudio/uni-app';
  import {
    hairText,
    shengxiaoText,
    shengxiaoSystem_prompt,
    statureText,
    styleText,
  } from '@/constant/aiText';
  import { praiseTextApi } from '@/sheep/api/doubao';

  // const email = ref('');

  const {
    // praiseTextApi,
    getStyleApi,
    exchangeHairHistoryByTaskId,
    wardrobeListApi,
    hairStyleListApi,
    addHairApi,
    getHairApi,
    getAiFaceResult,
    getUserInfo,
    getUserAvatar,
    sendMail,
    getImage,
  } = ReportApi;

  const collect = ref(null);

  const isInPptr = ref(false);

  onLoad((options) => {
    isInPptr.value = options?.isInPptr == '1';

    uni.setStorageSync('token', options?.token ?? '92d2805a85ca422e90dd7d50eef49a85');
    console.log('🚀 ~ URL上的token  ~ options?.token: ', options?.token);

    Promise.all([getUserInfo(), getAiFaceResult(), getUserAvatar(), getImage()]).then((result) => {
      const [res1, res2, res3, res4] = result;
      console.log('res4: zzzzzzzzzzzzz', res4.data.list);
      const [{ firstImageUrl, secondImageUrl, thirdImageUrl }] = res4.data.list;

      const { data } = JSON.parse(res2.result[0].thridResp);

      const target = Object.assign({}, JSON.parse(res1.data.dataJson), data.face_figure, {
        // avatar_img_url: res3.data.avatar || 'https://puton.huimeimeta.com/imgs/default_avatar.png',
        firstImageUrl,
        secondImageUrl,
        thirdImageUrl,
        avatar_img_url: options.img,
      });

      target.gender = target.sex || '女';
      collect.value = target;

      // colorTypeInfo.typeName + '型' === collect.sj_color_type ? '最佳颜色' : '不匹配'

      // const index = newColorTypeList.value.findIndex((item) => item.typeName + '型' === sj_color_type);
      // console.log('index: vvvvvvvvvvnnnnnnnnnnmmmmmmmmmmmmmm', index);

      // current.value = index

      // collect.value.avatar = collect.value.avatar || 'https://puton.huimeimeta.com/imgs/default_avatar.png'

      console.log('collect.value: ', collect.value);
    });
  });

  // if (
  //   typeof window !== "undefined" &&
  //   /MicroMessenger/i.test(navigator.userAgent)
  // ) {
  const pngImgUrl = ref('https://llshop.zglvling.com/shop/img/png/h5/');
  const showPreview = ref(false);
  const currentPreviewImage = ref('');
  let hairStyleList = ref([]);
  const previewImage = (imageUrl) => {
    currentPreviewImage.value = imageUrl;
    showPreview.value = true;
  };

  const closePreview = (e) => {
    // 阻止事件冒泡
    e.stopPropagation();
    showPreview.value = false;
    currentPreviewImage.value = '';
  };

  const gifAddress = 'https://llshop.zglvling.com/shop/img/gif/';
  const routes = new URLSearchParams(window.location.search);
  const classFixed = ref('');
  const openId = routes.get('openId');
  const enterType = routes.get('enterType'); // 1: 个人诊断报告 2: 发型试戴
  // const occupation = routes.get("occupation"); // 职业
  // const forWhom = routes.get("forWhom");

  let scrollHeight = ref(0);
  const activeTab = ref(0);

  const tabsList = ref([
    { name: '风格类型', icon: 'icon-style' },
    { name: '色彩类型', icon: 'icon-color' },
    { name: '发型发色', icon: 'icon-body' },
    { name: '幸运色', icon: 'icon-face' },
  ]);
  const newColorTypeList = ref([]);
  let shegnxiaoImgUrl = ref('wuxingLoading.png');
  let colorTypeInfo = ref([]);
  const colorTypeText = ref({});

  const current = ref(2);

  const praiseTextList = ref([]);
  const userFaceInfo = ref({ avatar_img_url: '' });
  const faceImgUrl = ref('');
  const shengxiao = ref();

  const chageSwiper = (e) => {
    console.log('e: ', e);
    current.value = e.detail.current;
    colorTypeInfo.value = newColorTypeList.value[current.value];
  };

  const clothesList = ref([]);
  const styleType = ref({});

  const chageSwiperBtn = (x) => {
    if (x === -1 && current.value !== 0) {
      current.value--;
      return;
    }
    if (x === 1 && current.value < newColorTypeList.value.length - 1) {
      current.value++;
    }
  };
  const hairIds = ref([]);
  const avatarList = ref([
    {
      id: 1,
      url: 'https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png',
    },
    {
      id: 2,
      url: 'https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png',
    },
    {
      id: 3,
      url: 'https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png',
    },
  ]);
  let luckyTxtList = ref([]);
  const shengxiaoNumList = ref([1, 2, 3, 4, 5]);
  const formatText = (text) => {
    text = text.replace(/[\u0000-\u001F]/g, (c) => {
      if (c === '\n') return '\\n';
      if (c === '\r') return '\\r';
      if (c === '\t') return '\\t';
      return '';
    });
    return text;
  };
  const formatPraiseText = (text) => {
    text = formatText(text);
    text = JSON.parse(text).choices[0].message.content;
    text = text.replace(/<\/?strong>/g, '');

    text = text.replace(/<h1>/g, '<div>').replace(/<\/h1>/g, '</div>');

    text = text.replace(/<h2>/g, '<div>').replace(/<\/h2>/g, '</div>');

    text = text.replace(/<h3>/g, '<div>').replace(/<\/h3>/g, '</div>');
    let list = [];
    const split1 = text.split('二、核心风格基因解析');
    list.push(split1[0]);
    split1[1] = '<p>二、核心风格基因解析</p>' + split1[1];
    const split2 = split1[1].split('五、关键细节设计：刘海与发色');
    split2[1] = '<p>五、关键细节设计：刘海与发色</p>' + split2[1];
    list = list.concat(split2);
    return list;
  };
  const formatShengXiao = (text) => {
    text = formatText(text);
    // text = JSON.parse(text).choices[0].message.content;
    text = text.replace(/<h1>/g, '<div>').replace(/<\/h1>/g, '</div>');

    text = text.replace(/<h2>/g, '<div>').replace(/<\/h2>/g, '</div>');

    text = text.replace(/<h3>/g, '<div>').replace(/<\/h3>/g, '</div>');
    let list = [];
    const split1 = text.split('二、五行命理与易学幸运色推导');
    list.push(split1[0]);
    split1[1] = '<p>二、五行命理与易学幸运色推导</p>' + split1[1];
    list.push(split1[1]);
    return list;
  };

  const customFigure = ref(null);

  const customerStyle = ref('');

  const getPraiseText = (callWord, type) => {
    let params = {
      // model: "doubao-seed-1-6-250615",
      model: 'doubao-seed-1-6-flash-250715',
      openId: openId,
      text: '',
      type: enterType,
      tabType: '',
    };
    if (type === 1) {
      // params.model = "doubao-1-5-thinking-vision-pro-250428";
      // params.model = "doubao-seed-1-6-250615";
      // params.model = "doubao-seed-1-6-flash-250715";
      params.model = 'doubao-1-5-thinking-pro-m-250428';
    }

    let customKey = `客户特征：
                性别：${collect?.value?.gender}
                出生年月日：${collect?.value?.birthday}
                年龄：${collect?.value?.age}
                身高：${collect?.value?.height}
                体重：${collect?.value?.weight}

                量感类型：${collect?.value?.total_sense_of_quantity_t}
                轮廓类型：${collect?.value?.straight_total_score_t}
                动静类型：${collect?.value?.dynamic_static_t}
                基因风格类型：${collect?.value?.type}

                心理风格：${collect?.value?.psychological_style}
                喜欢配色：${collect?.value?.color}
                心理量感类型：${collect?.value?.ling_of_quantity}
                心理曲直类型：${collect?.value?.right_and_wrong}
                心理动静类型：${collect?.value?.dynamic_and_static}
                体型分类：${collect?.value?.somatotype}
                存在的问题：${collect?.value?.question}
                修饰部位：${collect?.value?.purpose}
                场合需求：${collect?.value?.occasion_dressing}
                三庭五眼特征：${collect?.value?.three_courts_five_eyes}
                亮度：${collect?.value?.luminance}
                嘴型：${collect?.value?.mouth_shape}
                对比度：${collect?.value?.contrast}
                法令纹：${collect?.value?.nasolabial_folds}

                直曲总分：${collect?.value?.straight_total_score}
                眉形：${collect?.value?.camber}
                眼型：${collect?.value?.ocular_form}
                瞳色：${collect?.value?.eye_color}
                瞳距：${collect?.value?.interpupillary_distance}
                肤色：${collect?.value?.complexion}
                脖长：${collect?.value?.neck_length}
                脸型：${collect?.value?.feature}
                色度：${collect?.value?.chroma}
                色相：${collect?.value?.hue}
                量感总分：${collect?.value?.total_sense_of_quantity}
                面部年龄：${collect?.value?.facial_age}
                面部立体度：${collect?.value?.Facial_three_dimensionality}
                面部颜色对比度：${collect?.value?.face_color_contrast}
                鼻型：${collect?.value?.nose_type}
                鼻子立体度：${collect?.value?.nose_stereo_degree}
                肤色：${collect?.value?.complexion}
                亮度：${collect?.value?.luminance}
                四季色彩季型：${collect?.value?.sj_color_type}
                职业: ${collect?.value?.work}
                最在意谁的意见：${collect?.value?.attention}

              强调：
                1、客户的性别是${collect?.value?.gender}，千万要以${collect?.value?.gender}性的角度去产出数据，切记，这点十分重要
                2、客户为男性的时候，严禁出现裙装穿搭建议

  `;

    if (callWord === 'one') {
      params.tabType = 'hair';
      params.text = hairText(customKey);
    }

    if (callWord === 'three') {
      params.tabType = 'shengxiao';
      params.text = shengxiaoText(
        collect?.value?.birthday,
        collect?.value?.gender,
        collect?.value?.work,
      );

      params.system_prompt = shengxiaoSystem_prompt;
    }

    if (callWord === 'four') {
      params.tabType = 'stature';
      params.text = statureText(
        customKey,
        collect.value?.straight_total_score_t,
        collect.value?.total_sense_of_quantity_t,
        collect.value.dynamic_static_t,
      );
    }

    if (callWord === 'five') {
      params.tabType = 'style';
      params.text = styleText(customKey);
    }

    praiseTextApi(params).then((res) => {
      console.log('res: vvvvvvvvvvvvvvvvvvvv-----------oooooooooooo', res);
      // tabType
      if (callWord === 'one') {
        // console.log("数据是什么1", res.data);
        praiseTextList.value = formatPraiseText(res.data);
      } else if (callWord === 'two') {
        return;
        luckyTxtList.value = formatShengXiao(res.data);
      } else if (callWord === 'three') {
        let obj = JSON.parse(res.data);

        let shengxiaoContent = JSON.parse(obj.choices[0].message.content).content;
        luckyTxtList.value = formatShengXiao(shengxiaoContent.text);
        // console.log(shengxiaoContent, "shengxiaoContent");
        let shengxiaoList = shengxiaoContent.arr;
        shengxiao.value = shengxiaoList[0];

        shengxiaoNumList.value = shengxiaoList.slice(1);

        let wuxing = getMaxElement(shengxiaoNumList.value);
        // console.log("wuxing: ", wuxing);

        for (let i = 0; i < shengxiaoImgList.length; i++) {
          if (
            shengxiaoImgList[i].shengxiao === shengxiao.value &&
            shengxiaoImgList[i].element === wuxing
          ) {
            shegnxiaoImgUrl.value = shengxiaoImgList[i].imgUrl;
          }
        }
      } else if (callWord === 'four') {
        const obj = JSON.parse(res.data);
        console.log('obj: ccccccccccccccccccccccccccccc', obj);
        const content = obj.choices[0].message.content;
        customFigure.value = JSON.parse(content);

        console.log('customFigure.value: mmmmmmmmmmmmmmmmm', customFigure.value);
      } else if (callWord === 'five') {
        const obj = JSON.parse(res.data);
        const content = obj.choices[0].message.content;

        customerStyle.value = JSON.parse(content).html;
      }
    });
  };

  // const items = ref([]);

  // const wardrobeList = () => {
  //   // https://llshop.zglvling.com/soapi/wardrobe/clothes_list
  //   wardrobeListApi({
  //     open_id: openId,
  //     // categoryId: 10140,
  //     clothesIndex: 1,
  //     clothesKind: 0,
  //     clothesSize: 12,
  //   }).then((res) => {
  //     // console.log("衣服列表 -----------------", res.clothesList);

  //     const goods_images = res.clothesList
  //       .map((i) => i.goods_image)
  //       .filter((i) => i.length >= 5);

  //     items.value = goods_images;
  //     // clothesList.value = res.data.wardrobeList.slice(0, 3);
  //   });
  // };

  // wardrobeList();

  const getHairstyleList = () => {
    hairStyleListApi({
      phone: '17600222111',
      isPerson: 'yes',
    }).then((res) => {
      hairStyleList.value = res.result;
      // console.log(res, "发型列表 -----------------");
    });
  };

  // getHairstyleList();

  const pollExchangeHairHistory = (requestId, maxTries = 30, interval = 2000) => {
    let tries = 0;
    const poll = (resolve, reject) => {
      abc
        .exchangeHairHistoryByTaskId({ taskId: requestId })
        .then((ress) => {
          console.log('轮询结果', ress);

          const siteImg =
            'https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png';
          const images = ress.result.map((i) => i.url).filter((i) => i != siteImg);

          if ([...new Set(images)].length === 3) {
            resolve(ress);
          } else if (tries >= maxTries) {
            reject(new Error('轮询超时'));
          } else {
            tries++;
            setTimeout(() => poll(resolve, reject), interval);
          }

          // if(ress.result.length !== 3) {
          //   setTimeout(() => poll(resolve, reject), interval);
          // } else {
          //   resolve(ress);
          // }
        })
        .catch((err) => {
          reject(err);
        });
    };
    return new Promise(poll);
  };

  const getColorTypeText = (sj_color_type) => {
    const found = newColorTypeList.value.find((item) => item.typeName + '型' === sj_color_type);
    if (found) {
      colorTypeText.value = found;
    }
  };
  const addHair = async (data) => {
    await addHairApi({
      openId: openId,
      data: data,
    });
  };
  const getHair = async (data) => {
    let res = await getHairApi({
      openId: openId,
    });
    return res.data;
  };

  const getUserFaceInfo = async () => {
    getStyleApi({ openId: openId }).then(async (res) => {
      newColorTypeList.value = reorderByValue(colorTypeList, res?.detail?.sj_color_type);

      colorTypeInfo.value = newColorTypeList.value[0];

      const findIndex = newColorTypeList.value.findIndex((i) =>
        collect.value.sj_color_type.includes(i.typeName),
      );

      current.value = findIndex;

      colorTypeInfo.value = newColorTypeList.value[current.value];

      userFaceInfo.value = collect.value;

      if (userFaceInfo?.value?.gender === '男') {
        faceImgUrl.value =
          'https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/menhairstyles.png';
        let hairInfo = faceList.find((item) => item.id === 8);
        hairIds.value = hairInfo?.hairStyleIdList;
        // for(let i =0)
      } else {
        for (let i = 0; i < faceList.length; i++) {
          if (userFaceInfo?.value?.feature === faceList[i].name) {
            faceImgUrl.value = faceList[i].imgUrl;
            hairIds.value = faceList[i].hairStyleIdList;
          }
        }
      }

      getPraiseText('one');
      getPraiseText('three', 1);
      getPraiseText('four');
      getPraiseText('five');

      // getColorTypeText(res?.detail?.sj_color_type || '');
      getColorTypeText(collect.value.sj_color_type || '');

      let blob = await downloadFile(userFaceInfo?.value?.avatar_img_url);
      let formData = new FormData();
      formData.append('phone', '17600222111');
      formData.append('isHr', 'false');
      // formData.append('sex', userFaceInfo?.value.gender);
      formData.append('sex', collect.value?.gender == '男' ? 'male' : 'female');
      formData.append('hairIds', hairIds.value);
      // 如果有图片/文件需要上传
      if (blob) {
        formData.append('files', blob, 'avatar.jpg');
      }

      let taskInfo = await uploadFormData(formData);
      console.log('taskInfo: cccccccccccccccccc', taskInfo);
      let ress = null;
      if (enterType === 'weixin') {
        ress = await getHair();
      } else {
        const uuuress = await pollExchangeHairHistory(taskInfo.requestId);
        console.log('uuuress: xxxxxxxxxxxx', uuuress);
        // await addHair(ress);
        avatarList.value = uuuress.result;
      }
    });
  };

  const toHairstyleRoom = (item) => {
    wx.miniProgram.navigateTo({
      url: `/pages/hairstyleRoom/index?id=${item.fileId}`,
      success: function () {
        // alert('成功')
      },
      fail(error) {
        // alert('错误', error)
        console.log('navigateTo error: ', error);
      },
    });
  };

  function getScrollHeight() {
    const tabsEl = document.getElementById('headerBox');
    if (tabsEl) {
      const rect = tabsEl.getBoundingClientRect();
      console.log(rect.height, 'rect.height');

      scrollHeight.value = rect.height;
    }
  }

  function onPageScroll(e) {
    let scrollTop = e && e.scrollTop !== undefined ? e.scrollTop : window.scrollY;
    if (scrollTop > scrollHeight.value) {
      //277是需要固定的地方到顶部的距离
      classFixed.value = 'fixed';
    } else {
      classFixed.value = '';
    }
  }
  onMounted(() => {
    getScrollHeight();
    window.addEventListener('scroll', onPageScroll);
  });
  onUnmounted(() => {
    window.removeEventListener('scroll', onPageScroll);
  });
  // getStyleApi({ openId }).then((res) => {
  //   styleType.value = res.data;
  // });
  // .then(() => {
  //   getUserFaceInfo();
  // });

  watchEffect(() => {
    if (collect.value) {
      getUserFaceInfo();
    }
  });

  function onTabChange(tabIndex) {
    // H5端滚动到id=tabs的位置
    if (
      typeof window !== 'undefined' &&
      activeTab.value !== tabIndex &&
      !!window.scrollY &&
      window.scrollY > scrollHeight.value
    ) {
      window.scrollTo({ top: scrollHeight.value, behavior: 'smooth' });
    }
    activeTab.value = tabIndex;
  }

  const dialog = ref({
    visible: false,
  });

  const openEmailDialog = async () => {
    console.log('openEmailDialog: ');
    const emailVal = window.prompt('请输入邮箱').trim();

    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

    if (!emailRegex.test(emailVal)) {
      uni.showToast({ title: '请输入正确的邮箱', icon: 'none' });
      return;
    }

    const data = {
      timeout: 120 * 1000,
      url: window.location.href + '&isInPptr=1',
      email: emailVal,
    };

    console.log('data: xxxxxxxxxx', data);

    const res = await sendMail(data);

    if (res.data.code == 0) {
      uni.showToast({ title: '已经进入发送队列，稍后请查收邮件', icon: 'none' });
    } else {
      uni.showToast({ title: '报错，请重新发送', icon: 'error' });
    }

    // dialog.value.visible = true;
  };
</script>

<style>
  .report {
    padding: 20px 20px 0;
  }

  .report-title {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px !important;
    letter-spacing: 0px;
  }

  .report-title-en {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px !important;
    letter-spacing: 0px;
    color: rgba(216, 216, 216, 1);
  }

  .padding-top20 {
    padding: 20px 20px 0;
  }

  .color-tab-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .color-img {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    margin-bottom: 12px;
  }

  .color-desc {
    text-align: center;
    color: #666;
    font-size: 16px;
  }

  .title {
    padding: 0 20px;
  }

  .swiper-container {
    position: relative;
  }

  .avatar-box {
    display: flex;
    position: absolute;
    width: 100%;
    height: 235px;
  }

  .avatar {
    position: absolute;
    width: 235px;
    height: 235px;
    z-index: 9;
  }

  .avatar img {
    /* width: 235px; */
    height: 235px;
    transform: scale(1.2);
  }

  .swiper {
    width: 100%;
    height: 235px;
    margin-top: 20px;
  }

  .img-box {
    width: 235px;
    position: relative;
  }

  .btn {
    position: absolute;
    z-index: 999;
    width: 80px;
    height: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn img {
    width: 32px;
    height: 32px;
  }

  .left-btn {
    left: 0;
  }

  .right-btn {
    right: 0;
  }

  .swiper-item {
    /* display: block; */
    height: 235px;
    line-height: 28px !important;
    text-align: center;
    display: flex;
    justify-content: center;
    /* background-color: red; */
  }

  .swiper-instructions {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    padding-top: 10px;
  }

  .swiper-type-name {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px !important;
    letter-spacing: 94%;
  }

  .swiper-type-name-en {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px !important;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: rgba(216, 216, 216, 1);
    margin-top: 5px;
  }

  .swiper-type-text {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
    font-weight: 400;
    font-size: 12px;
    line-height: 28px !important;
    letter-spacing: 0%;
    margin-top: 5px;
  }

  .image {
    width: 100%;
  }

  .html-rich-text {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 28px !important;
    letter-spacing: 0% !important;
  }

  .reference-title {
    width: 100%;
    height: 17px;
  }

  .reference-title img {
    width: 100%;
    height: 17px;
  }

  .reference-img-box {
    height: 195.5px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
  }

  .reference-img-box .reference-img1 {
    width: 100%;
    height: 195.5px;
  }

  .reference-img-box .reference-img2 {
    width: 45px;
    height: 165px;
  }

  .reference-complate {
    width: 100%;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
    font-weight: 400;
    font-size: 12px;
    line-height: 28px !important;
    letter-spacing: 0%;
    text-align: center;
    color: rgba(216, 216, 216, 1);
    margin: 20px 0;
  }

  .avatar-warp {
    width: 100%;
    height: 192px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .avatar-main {
    width: 116px;
    height: 160px;
    margin: 0 10px;
    border-radius: 40px;
    overflow: hidden;
  }

  .avatar-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .avatar-side {
    width: 80px;
    height: 120px;
    /* background-color: yellow; */
    border-radius: 40px;
    overflow: hidden;
  }

  .avatar-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .rich-text-content {
    padding: 0 20px 20px;
  }

  .face-img-box {
    width: 336px;
    height: 338px;
  }

  .face-img-box img {
    width: 100%;
    height: 100%;
    /* border-radius: 8px; */
  }

  .more-hairstyle {
    width: 100%;
    /* height: 135px; */
    margin-top: 20px;
  }

  .more-hairstyle img {
    width: 100%;
    height: 100%;
  }

  .lucky-color-box {
    padding: 0 20px;
    min-height: 950px;
    /* overflow-y: hidden; */
  }

  .shengxiao {
    width: 100%;
    height: 283px;
  }

  .shengxiao img {
    width: 100%;
    height: 100%;
  }

  .five-attribute-box {
    position: relative;
    /* margin-bottom: 20px; */
  }

  .numblock {
    width: 50px;
    height: 50px;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    position: absolute;
    color: white;
    z-index: 999;
  }

  .five-attribute {
    width: 100%;
    /* height: 597px; */
    position: relative;
  }

  .five-attribute img {
    width: 100%;
    height: 100%;
  }

  .avatorLogo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 25%;
    width: 66.5px;
    height: 66.5px;
    background-color: red;
    border-radius: 50%;
    overflow: hidden;
    border: 3.22px solid rgba(167, 178, 179, 1);
  }

  .avatorLogo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .style-type {
    line-height: 28px !important;
    font-family: 'Microsoft YaHei', 'Arial', sans-serif !important;
    color: #031c24;
    /* font-family: Molengo; */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;

    /* height: 900px;
  background-color: red; */
  }

  .trends-title {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
    margin-bottom: 16px;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px !important;
    letter-spacing: 0px;
  }

  .trends-img-box {
    display: flex;
    width: 100%;
    height: 330px;
    justify-content: space-between;
  }

  .trends-img-box1 {
    width: 220px;
  }

  .trends-img-box1 img {
    width: 100%;
    height: 100%;
  }

  .trends-img-box2 {
    width: 102px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .trends-img {
    width: 102px;
    height: 134px;
  }

  .trends-img img {
    width: 100%;
    height: 100%;
  }

  .trends-one-try-btn {
    width: 102px;
    height: 24px;
    background-color: black;
    margin-top: 28px;
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif !important;
    font-weight: 400;
    font-style: Regular;
    font-size: 12px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 28px !important;
    letter-spacing: 0px;
  }

  .scroll-box {
    width: 100%;
    overflow-x: auto;
    display: flex;
    white-space: nowrap;
    scrollbar-width: none;
    /* Firefox 隐藏滚动条 */
    -ms-overflow-style: none;
    /* IE/Edge 隐藏滚动条 */
  }

  .scroll-box::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Opera 隐藏滚动条 */
  }

  .fixed {
    position: fixed;
    top: 0;
    z-index: 9999;
  }

  /* 预览遮罩层样式 */
  .preview-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }

  .preview-container {
    width: 90%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .preview-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
  }
</style>

<style scoped lang="scss">
  .download {
    background-color: #d9d9d9;
    height: 128rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    padding: 0 24rpx;

    .download-left {
      .pdf-icon {
        width: 102rpx;
        height: 102rpx;
      }
    }

    .download-center {
      flex: 1;
      align-self: stretch;
      color: #979797;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .download-right {
      width: 150rpx;
      height: 80rpx;
      background-color: #000;
      font-size: 28rpx;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }

  .btn-bottom {
    margin-top: 20rpx;

    height: 300rpx;

    .next-btn {
      width: 80% !important;
      height: 80rpx;
      // border-radius: 16rpx;
      background-color: #0d232c;
      color: white;
      font-size: 32rpx;
    }
  }

  .m-dialog {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9999;

    .m-dialog-main {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 80%;
      height: 50%;
      background-color: white;
      transform: translate(-50%, -60%);
      border-radius: 15rpx;
      // display: flex;
      // align-items: center;
      // flex-direction: column;
      // justify-content: center;
      padding-top: 250rpx;
      box-sizing: border-box;
      padding-left: 30rpx;

      .email {
        // font-size: 35rpx;
        display: flex;
      }

      .placeholder {
        font-size: 35rpx;
        line-height: 1;
      }

      .btn {
        width: 80% !important;
        height: 80rpx;
        border-radius: 16rpx;
        margin-top: 50rpx;
        background-color: #0d232c;
        color: white;
        font-size: 32rpx;
      }
    }
  }
</style>
